<script lang="ts" setup>
import type { VbenFormSchema } from "@vben/common-ui";
import type { BasicOption } from "@vben/types";

import { computed, markRaw } from "vue";

import { AuthenticationLogin, SliderCaptcha, z } from "@vben/common-ui";
import { $t } from "@vben/locales";

import { useAuthStore } from "#/store";

defineOptions({ name: "Login" });

const authStore = useAuthStore();

const MOCK_USER_OPTIONS: BasicOption[] = [
  {
    label: "Super",
    value: "vben",
  },
  {
    label: "Admin",
    value: "admin",
  },
  {
    label: "User",
    value: "jack",
  },
];

const formSchema = computed((): VbenFormSchema[] => {
  return [
    // {
    //   component: "VbenSelect",
    //   componentProps: {
    //     options: MOCK_USER_OPTIONS,
    //     placeholder: $t("authentication.selectAccount"),
    //   },
    //   fieldName: "selectAccount",
    //   label: $t("authentication.selectAccount"),
    //   rules: z
    //     .string()
    //     .min(1, { message: $t("authentication.selectAccount") })
    //     .optional()
    //     .default("vben"),
    // },
    {
      component: "VbenInput",
      componentProps: {
        placeholder: '账号',
      },
      // dependencies: {
      //   trigger(values, form) {
      //     if (values.selectAccount) {
      //       const findUser = MOCK_USER_OPTIONS.find(
      //         (item) => item.value === values.selectAccount
      //       );
      //       if (findUser) {
      //         form.setValues({
      //           password: '123456',
      //           username: findUser.value,
      //         });
      //       }
      //     }
      //   },
      //   triggerFields: ["selectAccount"],
      // },
      // fieldName: "username",
      fieldName: "name",
      label: '账号',
      rules: z.string().min(1, { message: '请输入账号' }).default("smile"),
    },
    {
      component: "VbenInputPassword",
      componentProps: {
        placeholder: '密码',
      },
      // fieldName: "password",
      fieldName: "pwd",
      label: '密码',
      rules: z.string().min(1, { message: '请输入密码' }).default("django"),
    },
    // {
    //   component: markRaw(SliderCaptcha),
    //   fieldName: "captcha",
    //   rules: z.boolean().refine((value) => value, {
    //     message: $t("authentication.verifyRequiredTip"),
    //   }),
    // },
  ];
});

// 设置默认的初始值
const defaultValues = {
  name: "smile",
  pwd: "django",
};
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="authStore.loginLoading"
    :initial-values="defaultValues"
    @submit="authStore.authLogin"
  />
</template>
<style scoped>
</style>
